<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>web05</title>
		<meta name="description" content="" />
		<meta name="author" content="Choongang" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		
		<style>
			/* selector {속성:갑; } */
			body{padding: 100px; 
				 padding-left: 50px;
				 
				 margin: 10px 5px ; 
				/* 위아래는 10px, 오른쪽 왼쪽은 5px*/
				 
				 
				/*background-color:#ffffee;
				 background-image: url("giraffe.jpg");
				 background-repeat: no-repeat;
				 background-position-x: right;
				 background-position-y: top;*/

				/* css 거의 항상 여러 속성을 한번에 쓰는 shotcut 이 있다. */
				background:#ffffcc url("giraffe.jpg") right top no-repeat;
			}
			u {text-decoration: none; }
			a { /* 모든 a에 적용 */}
			u a{ /* u의 하위에 있는 모든 a에 적용 */ }
			u div a {}
			#d { /* 아이디가 d인 모든 것에 적용*/ }
			.title { /* class가 title 인 모든 요소에 적용 */}
			h1.title{ /*h1이면서 class가 title에 적용 */ }
			h2#big{/*h2 이면서 id=big에 적용*/}
			h2#big ul { /*h2&&id==big의 하위의 ul에 적용*/ }
			a:hover{ /*a에 마우스가 올라가면 그 때만 적용*/
				background-color: yellow;}
			a:active{/*a를 마우스로 누르고 있을 때에만 적용*/ 
				font-size: 2em;}
			a:visited{/*한 번 눌렀던 a태그에 적용*/
				color:#00FFFF;}
			a:hover li{ /*a에 마우스가 올라갈 때만 그 하위의 li에 적용*/ }
			div, span, li {/*div span li 모두에 적용*/}
			
			div{/*display: block는 라인 breaker */
				 display:block;}
			span{/* display: inline은 라인을 유지*/
				display: inherit;}
			h1{/*원래 라인을 깨트리는데 못깨트리게 바꿈*/
				display:inline;
				position:inherit; /*기본*/
				position:absolute;/*절대좌표*/
				left:100px;
				top:100px; /*(100,100)*/
				position: fixed; /*화면의 어느 위치에 고정*/
				left:100px;	top:100px
			/*absolute와 fixed는 공간을 차지하지 않습니다. relative는 자신 원래공간을 양보하지 않는다. */
				position:relative; left:30px;}
				
				
			article{ color:#00ffff;
				 color:rgb(233,20,20);
				 color:brown;
				 text-align: inherit;
				 text-decoration: blink;
				/*첫글자만 대문자로*/
				 text-transform:capitalize;
				/*첫문장의 들여쓰기*/
				 text-indent: 10px;
				
			}
				
		</style>
		
	</head>


	<body>
		<article> today 오늘은 금요일 입니다. </article>
		LineBreaker : div h1~h6 li tr 
		<script>
			u=document.createElement("u");
			u.innerHTML="내가만든 u";
			document.body.appendChild(u);
		</script>
	</body>
		<h1 class="title"> New web Project Page </h1>
		<script>
			a=document.createElement("a");
			a.href="http://naver.com";
			a.innerHTML="네이버바로가기";
			u.appendChild(a);
		
		div=document.createElement("div");
		u.appendChild(div);
		//div에 글자를 넣어주자
		tn=document.createTextNode("텍스트노드입니다.");
		div.appendChild(tn);
		
		h1=document.getElementsByTagName("h1")[0];
		console.log("h1=", h1.innerHTML);
		h1first=h1.firstChild;
		data=h1first.data;
		console.log("h1first data ", data);
		// document.어디의 자식으로.넣어라(무없을,u전에다가);
		document.body.insertBefore(h1,u);
		</script>
		<div id="d">
			안녕하세요
		<img id="image" src="dog.jpg" width="50" />
		</div>
		<script>
			d=document.getElementById("d");
			image=document.getElementById("image");
			document.write("<br>d의 childNodes="+d.childNodes);
			document.write("<br>d의 nodeName="+d.nodeName);
			document.write("<br>d의 nodetype="+d.nodeType);
			document.write("<br>d의 nodeValue="+d.nodeValue);
			document.write("<br>image의 childNodes="+image.childNodes);
			document.write("<br>image의 nodeName="+image.nodeName);
			document.write("<br>image의 nodetype="+image.nodeType);
			document.write("<br>image의 nodeValue="+image.nodeValue);
			document.write("<br>d.childNodes[0]의 childNodes="+d.childNodes[0].childNodes);
			document.write("<br>d.childNodes[0]의 nodeName="+d.childNodes[0].nodeName);
			document.write("<br>d.childNodes[0]의 nodetype="+d.childNodes[0].nodeType);
			document.write("<br>d.childNodes[0]의 nodeValue="+d.childNodes[0].nodeValue);
		</script>
		
	
	
</html>
